<template>
    <div class="w-full">
      <a-input-group class="w-full">
        <a-input placeholder="请点击右侧按钮选择图标" v-if="props.preview" allow-clear v-model="currentIcon" />
        <div class="icon-container" v-if="props.preview">
          <div v-if="currentIcon" style="font-size: 24px;" :class="[currentIcon]"></div>
        </div>
        <a-button type="primary" @click="() => visible = true">选择图标</a-button>
      </a-input-group>
  
      <a-modal v-model:visible="visible" width="960px" draggable :footer="false">
        <template #title>选择App图标</template>
        <div class="tabs">
            <template v-for="item, index in iconData.data">
                <a-divider orientation="left">{{ item.name }}</a-divider>
                    <ul class="arco">
                        <li
                            v-for="icon in item.icons"
                            :key="icon.icon"
                            @click="selectIcon(icon)"
                        >
                            <a-tooltip :content="icon.description">
                                <div class="icon-item">
                                    <div class="icon-item-icon" :class="['tn-icon-'+ icon.icon]"></div>
                                </div>
                            </a-tooltip>
                        </li>
                    </ul>
            </template>
        </div>
      </a-modal>
    </div>
  </template>
  
  <script setup>
    import { reactive, ref, computed } from 'vue'
    import iconData from './iconfont.js'
  
    const visible = ref(false)
  
    const props = defineProps({
      modelValue: { type: String },
      preview: { type: Boolean, default: true },
    })
  
    const emit = defineEmits(['update:modelValue'])
  
    const currentIcon = computed({
      get() {
        return props.modelValue;
      },
      set(value) {
        if (value == '') {
          emit('update:modelValue', '');
        } else {
          emit('update:modelValue', 'tn-icon-' + value);
        }
      }
    });
  
    const selectIcon = (icon) => {
      currentIcon.value = icon.icon
      visible.value = false
    }

  </script>

  
  <style>
  @import './iconfont.css';
  </style>

  <style scoped lang="less">
  .icon-container {
    width: 50px; height: 32px;
    background-color: var(--color-fill-1);
    display: flex; justify-content: center;
    align-items: center;
  }
  
  .icon-item {
    margin: 8px 4px;
    margin-top: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: -webkit-transform .2s linear;
    transition: transform .2s linear;
    transition: transform .2s linear, -webkit-transform .2s linear;
    -webkit-transform-origin: center center;
    transform-origin: center center;

    .icon-item-icon {
        width: 32px;
        height: 32px;
        font-size: 28px;
    }

  }
  
  .tabs {
  
    ul {
      display: flex; flex-wrap: wrap; padding-left: 7px;
    }
  
    li {
      border: 2px solid var(--color-fill-4); margin-bottom: 10px;
      margin-right: 6px; padding: 5px; cursor: pointer;
    }
    
    li:hover, li.active {
      border: 2px solid rgb(var(--primary-6));
    }
  
    & li svg {
      width: 2.4em; height: 2.4em;
    }
  }
  :deep(.arco-select-option-content) {
    width: 100%;
  }
  </style>